<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>充电中</title>
    <link type="text/css" rel="stylesheet" href="../static/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/style.css">
    <style>
        #rule {
            position: fixed;
            background: rgba(0, 0, 0, 0.6);
            color: #ffffff;
            bottom: 0;
            width: 100%;
            left: 0;
            box-sizing: border-box;
        }

        #ruleBtn {
            position: absolute;
            height: 2.25rem;
            top: -2.25rem;
            left: 0;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 0 10px 0 0;
            padding: .5rem .8rem;
            box-sizing: border-box;
            cursor: pointer;
            font-size: .925rem;
        }

        #ruleTxt {
            padding: 1rem;
            font-size: .925rem;
            line-height: 1.5rem;
            display: none;
        }
    </style>
</head>
<body class="uf uf-ver uf-pj uf-ac">
<a class="_user" href="user.html"><i class="fa fa-user-o" aria-hidden="true"></i></a>
<div class="_title"></div>
<div class="uf uf-ver uf-ac uf-pc">
    <div class="sCircles uf uf-pc uf-ac">
        <div class="sCircle2">
            <i class="fa fa-flash" aria-hidden="true"></i>
            <div class="sPoint"></div>
            <div class="sPointX"></div>
        </div>
    </div>

    <!--todo 不同状态不同内容 start-->
    <div class="_text">充电中</div>
    <!--<div class="_text">充电指令已下发，请稍候</div>-->
    <!--<div class="_text">正在结束充电...</div>-->
    <!--不同状态不同内容 end-->

</div>
<div class="uf uf-ver uf-ac uf-pc">
    <div id="chargingTime" class="chargingTime">00:00</div>

    <!--todo 不同状态不同内容 start-->
    <div class="_text">充电时长</div>
    <!--<div class="_text">等待下电</div>-->
    <!--<div class="_text">正在结束充电...</div>-->
    <!--不同状态不同内容 end-->

</div>

<!--todo 不同状态不同内容 start-->
<button onclick="chargingOut()" type="button" class="scrBtn">停止充电</button>
<!--<button type="button" class="scrBtn" disabled>停止充电</button>-->
<!--不同状态不同内容 end-->

<div class="_logo"></div>

<div class="uf uf-ac uf-pc" style="position: fixed;background: rgba(0,0,0,0.5);right: 10px;bottom: 2rem;color: #ffffff;border-radius: 50%;width: 3rem;height: 3rem;line-height: 1rem;font-size: .825rem;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;">异常<br/>诊断</div>

<div id="rule" onclick="$('#ruleTxt').slideToggle();">
    <div id="ruleBtn">收费规则 》》</div>
    <div id="ruleTxt">空军的说法伽开始的法式咖啡和卢萨卡海地发生快递费哈萨克浪费</div>
</div>

<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/jqToast.js"></script>
<script type="text/javascript" src="../static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="../static/js/tool.js"></script>
<script>
    //计算时长
    var timestampStart = new Date().getTime();

    function getLongTime(startTime) {
        var nowTimestamp = new Date().getTime();
        if (!startTime) startTime = timestampStart;
        document.getElementById("chargingTime").innerHTML = formatSeconds((nowTimestamp - startTime) / 1000);
    }

    /**
     *格式化秒
     * @param value 秒数
     * @returns {string}
     */
    function formatSeconds(value) {
        var secondTime = parseInt(value);// 秒
        var minuteTime = 0;// 分
        var hourTime = 0;// 小时
        if (secondTime > 59) {//如果秒数大于60，将秒数转换成整数
            //获取分钟，除以60取整数，得到整数分钟
            minuteTime = parseInt(secondTime / 60);
            //获取秒数，秒数取佘，得到整数秒数
            secondTime = parseInt(secondTime % 60);
            //如果分钟大于60，将分钟转换成小时
            if (minuteTime > 59) {
                //获取小时，获取分钟除以60，得到整数小时
                hourTime = parseInt(minuteTime / 60);
                //获取小时后取佘的分，获取分钟除以60取佘的分
                minuteTime = parseInt(minuteTime % 60);
            }
        }

        var secondStr = parseInt(secondTime) > 9 ? parseInt(secondTime) : '0' + parseInt(secondTime);
        var minuteStr = '00';
        if (minuteTime > 0) {
            minuteStr = parseInt(minuteTime) > 9 ? parseInt(minuteTime) : '0' + parseInt(minuteTime)
        }
        var hourStr = '00';
        if (hourTime > 0) {
            hourStr = parseInt(hourTime) > 9 ? parseInt(hourTime) : '0' + parseInt(hourTime);
            return hourStr + ':' + minuteStr + ':' + secondStr
        }
        return minuteStr + ':' + secondStr;
    }

    var longTimeInterval = null;
    longTimeInterval = setInterval('getLongTime()', 1000);


    function chargingOut() { //停止充电
        //todo 停止充电
        alert('停止充电');
    }

</script>
</body>
</html>